<template>
  <div class="productList_box">
    <ul>
      <li v-for="item in picList" :key="item.id">
        <div class="top">
          <img :src="item.img_url" alt="" >
        </div>
        <div class="bottom">
            <p class="title">{{ item.title }}</p>
            <div class="price">
                <span class="new">￥{{ item.sell_price }}</span><span class="old">￥{{ item.market_price }}</span>
            </div>
            <div class="other">
                <span class="hot">热卖中</span><span class="kucun">库存：{{ item.stock_quantity }}件</span>
            </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      picList:[]
    };
  },
  created() {
    this.getPic();
  },
  methods: {
    getPic() {
      this.$http.get("api/getgoods?pageindex=" + this.page).then(res => {
        // console.log(res.body.message);
        this.picList=res.body.message
      });
    }
  }
};
</script>

<style lang="less">
.productList_box {
  ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
    li {
      float: left;
      list-style: none;
      width: 48%;
      padding: 0;
      margin-left: 5px;
      margin-top: 5px;
      box-shadow: 0px 0px 0px 1px #ccc;
      img {
          width: 100%;
      }
      .bottom {
          .title{
              color: #000;
              font-size: 14px;
              font-weight: 700;
              height: 42px;
              overflow: hidden;
              padding: 0 2px;
          }
          .price {
              padding: 5px 5px;
              background-color: #ccc;
              .new {
                  font-size: 16px;
                  color: red;
                  font-weight: 700;
              }
              .old {
                  text-decoration: line-through;
                  font-size: 12px;
                  margin-left: 10px;
              }
          }
          .other {
              padding: 5px 5px;
              background-color: #ccc;
              .hot {
                  color: #605c5c;
                  font-size: 14px;
              }
              .kucun {
                  float: right;
                  color: #605c5c;
                  font-size: 14px;
              }
          }
      }
    }
  }
}
</style>